<template>
  <div>
    <div class="quote-board price-list" style="position: relative;">
      <div class="line">
        <ul>
          <li v-for="(item,index) in type" :key="item.id">
            <input type="radio" :id="item.id" :checked="item.id == app_cate" v-on:click="checkAppCategory(item.id)" name="front">
            <label :for="item.id">{{item.name}}</label>
          </li>
          <li>
            <input type="radio" id="0" :checked="0 == app_cate" v-on:click="checkSumCycle()" name="front">
            <label for="0">总汇总</label>
          </li>
        </ul>
        <button class="back" @click="goBack">返回上一步</button>
      </div>
      <div class="line" v-if="!isShow.sum_cycle" >
        <ul>
          <li @click="tablabel('all')">
            <input type="radio" id="021" checked name="tect">
            <label for="021">全部</label>
          </li>
          <li  @click="tablabel('application')">
            <input type="radio" name="tect" id="022">
            <label for="022">应用逻辑</label>
          </li>
          <li @click="tablabel('technology')">
            <input type="radio" name="tect" id="023">
            <label for="023">技术选型</label>
          </li>
          <li @click="tablabel('functions')">
            <input type="radio" name="tect" id="024">
            <label for="024">功能开发评估</label>
          </li>
          <li @click="tablabel('uis')">
            <input type="radio" name="tect" id="025">
            <label for="025">UI设计评估</label>
          </li>
          <li @click="tablabel('frontEnd')">
            <input type="radio" name="tect" id="026">
            <label for="026">前端开发评估</label>
          </li>
          <li @click="tablabel('online')">
            <input type="radio" name="tect" id="027">
            <label for="027">上线部署评估</label>
          </li>
          <li @click="tablabel('summary')">
            <input type="radio" name="tect" id="028">
            <label for="028">汇总</label>
          </li>
        </ul>
      </div>
    <div v-for="(cate,index) in type" :key="cate.id"  v-if="cate.id == app_cate">
      <div v-if="isShow.application" class="date-time content">
        <h4>应用逻辑（默认一般逻辑）</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>工时</th>
            <th>说明</th>
          </tr>
          <tr v-for="(item,index) in logic" :key="item.id">
            <td>
              <input type="radio" :id="item.id" :checked="logic_cycle[app_cate]!=undefined && logic_cycle[app_cate][index] == item.cycle" :name="'cate'+cate.id" v-on:click="checkLogic(index,item.cycle)">
              {{item.name}}
            </td>
            <td>{{item.cycle}}</td>
            <td>{{item.des}}</td>
          </tr>
        </table>
      </div>

      <div v-if="isShow.technology" class="date-time content">
        <h4>技术选型</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>要求</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>功能开发</td>
            <td>
              <label v-for="(item,index) in language1" :key="item.id">
                <span>
                  <input type="radio" name="gonnen" :id="item.id" :checked="gongnen_index[app_cate]==index" v-on:click="checkGonNeng(index)">
                   {{item.name}}
                </span>
              </label>
            </td>
            <td>
              <div v-for="(item,index) in language1" :key="item.id"> {{item.name}}:  {{item.des}}</div>
            </td>
          </tr>
        </table>

        <table border="1">
          <tr>
            <th>应用版本</th>
            <th>应用范畴</th>
            <th>应用语言</th>
          </tr>
        <template v-for="ve in version" v-if="ve != '' ">
          <tr>
            <td rowspan="2">
              <input type="checkbox" name="laguage_version" :checked="laguage_version!=undefined && laguage_version.indexOf(ve.id)!=-1" v-on:click="checkVersion(ve.id)">
              {{ve.name}}
            </td>
            <td><input type="checkbox" name="laguage_terminal" :checked="laguage_version!=undefined && laguage_version.indexOf(ve.id)!=-1 && laguage_terminal!=undefined && laguage_terminal[app_cate]!=undefined && laguage_terminal[app_cate][ve.id]!=undefined && laguage_terminal[app_cate][ve.id].indexOf(2)!=-1">前端开发</td>
            <td>
              <label v-for="(item,index) in language2" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" :name="'qianduan-'+cate.id+'-'+ve.id" :checked="qianduan_index!=undefined && qianduan_index[app_cate]!=undefined && index == qianduan_index[app_cate][ve.id] && laguage_version!=undefined && laguage_version.indexOf(ve.id)!=-1" v-on:click="checkQianDuan(index,ve.id)">
                   {{item.name}}
                </span>
              </label>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="laguage_terminal" :checked="laguage_version!=undefined && laguage_version.indexOf(ve.id)!=-1  && laguage_terminal!=undefined && laguage_terminal[app_cate]!=undefined && laguage_terminal[app_cate][ve.id]!=undefined && laguage_terminal[app_cate][ve.id].indexOf(3)!=-1">ui设计</td>
            <td>
              <label v-for="(item,index) in language3" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" :name="'sheji-'+cate.id+'-'+ve.id" :checked="sheji_index !=undefined && sheji_index[app_cate]!=undefined && laguage_version!=undefined && index == sheji_index[app_cate][ve.id] && laguage_version.indexOf(ve.id)!=-1" v-on:click="checkSheji(index,ve.id)">
                   {{item.name}}
                </span>
              </label>
            </td>

          </tr>
        </template>

        </table>
      </div>


       <div v-if="isShow.functions" class="date-time content" style="position: relative;">
        <h4>功能评估（默认是核心功能）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>功能</th>
            <th>子功能</th>
            <th>工时（小时）</th>
            <th>总计（小时）</th>
          </tr>
          <tr  @mouseenter="showLeft(index,$event)" @mouseleave="hiddenLeft" v-for="(item,index) in gongnen" :key="item.id" v-if="item != undefined">
            <td>{{item.plate_name}}</td>
            <td>{{item.child_name}}</td>
            <td>
              {{item.page_name}}
            </td>
            <td>
              {{item.gongnen_name}}
            </td>
            <td>
              <input type="checkbox" name="gonneng" :checked="check_gongnen_index!=undefined && check_gongnen_index.indexOf(index)!=-1" v-on:click="checkPingGu(index,item.hour,$event)">
               {{item.child_gongnen_name}}
            </td>
            <td>{{item.hour}}</td>
            <td v-if="item.check_hour != undefined">{{item.check_hour}}</td>
            <td v-else>0</td>
          </tr>


          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{gongnen_total()}}</td>
          </tr>

        </table>
        <div class="leftModel" :style="{top: top + 'px'}" v-if="gongnen_hover!=undefined">
          <div style="position: relative;" class="san">
            <h2>{{gongnen_hover.gongnen_name}}-{{gongnen_hover.child_gongnen_name}}</h2>
            <div>{{gongnen_hover.child_gongnen_des}}</div>
            <div v-if="gongnen_hover.img != ''"><img class="thumb" :src="gongnen_hover.img"/></div>
          </div>
        </div>
      </div>

       <!--UI设计评估-->
       <div class="date-time content ui" v-for="ve in version" v-if="isShow.uis && laguage_version.indexOf(ve.id)!=-1">
        <h4>{{ve.name}}-页面设计评估（默认不需要）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>页面数（个）</th>
            <th>
              <label>
                <input type="radio" :name="'sheji_'+ve.id" value="0" v-on:click="cancelAllPingGuSheji(ve.id)">
                <img src="../../assets/img/radio.png" width="17" v-if="uiIsNeed[ve.id] == 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="uiIsNeed[ve.id] != 0">
                不需要
              </label>
              <label>
                <input type="radio" :name="'sheji_'+ve.id" value="1" v-on:click="checkAllPingGuSheji(ve.id)">
                <img src="../../assets/img/radio.png" width="17" v-if="uiIsNeed[ve.id] != 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="uiIsNeed[ve.id] == 0">
                需要
              </label>
            </th>
            <th>工时（小时）

            </th>
            <th>总计（小时）</th>
          </tr>
          <tr v-for="(item, index) in pages_sheji[ve.id]" :key="item.id">
            <td>{{item.plate_name}}</td>
            <td>{{item.child_name}}</td>
            <td>{{item.page_name}}</td>
            <td>1</td>
            <td>
              <label>
                <input type="radio" name="sheji" value="0"  v-on:click="cancelPingGuSheji(ve.id,index,item.hour)">
                <img src="../../assets/img/radio.png" width="17" v-if="item.need == 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="item.need != 0">
                不需要
              </label>
              <label>
                <input type="radio" name="sheji" value="1" v-on:click="checkPingGuSheji(ve.id,index,item.hour)">
                <img src="../../assets/img/radio.png" width="16" v-if="item.need != 0">
                <img src="../../assets/img/radiofalse.png" width="17" v-if="item.need == 0">
                需要
              </label>
            </td>
            <td>{{item.hour}}</td>
            <td v-if="item.check_hour != undefined">{{item.check_hour}}</td>
            <td v-else>0</td>
          </tr>
          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{sheji_total(ve.id)}}</td>
          </tr>
        </table>
      </div>


       <!--页面制作-->
       <div class="date-time content" v-for="ve in version" v-if="isShow.frontEnd && laguage_version.indexOf(ve.id)!=-1">
        <h4>{{ve.name}}-页面制作评估（默认是不需要）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>页面数（个）</th>
            <th>要求
              <label>
                <input type="radio" :name="'page'+ve.id" :checked="zhizuoIsNeed[ve.id]==0" v-on:click="cancelAllPingGuZhizuo(ve.id,0)">
                不需要
              </label>
              <label>
                <input type="radio" :name="'page'+ve.id" :checked="zhizuoIsNeed[ve.id]==1" v-on:click="checkAllPingGuZhizuo(ve.id,1)">
                仿制
              </label>
              <label>
                <input type="radio" :name="'page'+ve.id" :checked="zhizuoIsNeed[ve.id]==2" v-on:click="checkAllPingGuZhizuo(ve.id,2)">
                手写
              </label>
            </th>
            <th>工时（小时）</th>
            <th>总计（小时）</th>
          </tr>

          <tr v-for="(item, index) in pages_zhizuo[ve.id]" :key="item.id">
            <td>{{item.plate_name}}</td>
            <td>{{item.child_name}}</td>
            <td>{{item.page_name}}</td>
            <td>1</td>
            <td>
              <label>
                <input type="radio"  :name="'normalPage_'+item.id" :checked="item.need==0" v-on:click="cancelPingGuZhizuo(ve.id,item.id,index,0)">
                不需要
              </label>
              <label>
                <input type="radio" :name="'normalPage_'+item.id" :checked="item.need==1" v-on:click="checkPingGuZhizuo(ve.id,item.id,index,0,1)">
                仿制
              </label>
              <label>
                <input type="radio" :name="'normalPage_'+item.id" :checked="item.need==2" v-on:click="checkPingGuZhizuo(ve.id,item.id,index,1,2)">
                手写
              </label>
            </td>
            <td>{{item.hour}}</td>
            <td v-if="item.check_hour != undefined">{{item.check_hour}}</td>
            <td v-else>0</td>
          </tr>

          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{qianduan_total(ve.id)}}</td>
          </tr>
        </table>
      </div>




      <div v-if="isShow.online" class="date-time content">
        <h4>上线部署要求</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>工时（小时）</th>
          </tr>
          <tr>
            <td>{{deploy.name}}</td>
            <td>{{deploy.cycle}}</td>
          </tr>

        </table>
      </div>
      
      <div v-if="isShow.summary" class="date-time content" >
        <h4>汇总</h4>
        <table border="1" ref="tableWrap">
          <tr>
            <th>类目</th>
            <th>开发工时（小时）</th>
            <th>单价：（90元/小时）</th>
            <th>费用（元）</th>
          </tr>
          <tr class="tongji">
            <td>应用逻辑</td>
            <td>{{logic_cycle_total[app_cate]}}</td>
            <td>{{dev_price.logic}}</td>
            <td>{{dev_price.logic*logic_cycle_total[app_cate]}}</td>
          </tr>
          <tr class="tongji">
            <td>功能开发</td>
            <td>{{gongnen_cycle_total[app_cate]}}</td>
            <td>{{dev_price.gongnen}}</td>
            <td>{{dev_price.gongnen*gongnen_cycle_total[app_cate]}}</td>
          </tr>
          <tr class="tongji">
            <td>页面设计</td>
            <td>{{sheji_cycle_total[app_cate]}}</td>
            <td>{{dev_price.sheji}}</td>
            <td>{{sheji_cycle_total[app_cate]*dev_price.sheji}}</td>
          </tr>
          <tr class="tongji">
            <td>页面制作</td>
            <td>{{zhizuo_cycle_total[app_cate]}}</td>
            <td>{{dev_price.qianduan}}</td>
            <td>{{zhizuo_cycle_total[app_cate]*dev_price.qianduan}}</td>
          </tr>
          <tr class="tongji">
            <td>上线部署</td>
            <td>{{deploy.cycle}}</td>
            <td>{{dev_price.bushu}}</td>
            <td>{{dev_price.bushu*deploy.cycle}}</td>
          </tr>
          <tr class="tongji">
            <td>总计</td>
            <td>{{parseInt(logic_cycle_total[app_cate])+parseInt(gongnen_cycle_total[app_cate])+parseInt(sheji_cycle_total[app_cate])+parseInt(zhizuo_cycle_total[app_cate])+parseInt(deploy.cycle)}}</td>
            <td>\</td>
            <td>{{dev_price.logic*logic_cycle_total[app_cate]+dev_price.gongnen*gongnen_cycle_total[app_cate]+sheji_cycle_total[app_cate]*dev_price.sheji+zhizuo_cycle_total[app_cate]*dev_price.qianduan+dev_price.bushu*deploy.cycle}}</td>
          </tr>
        </table>
      </div>


     </div>

     <!--总汇总-->
     <div v-if="isShow.sum_cycle" class="date-time content" >
        <h4>总汇总</h4>
        <table border="1" ref="tableWrap">
         <tr>
           <th>类目</th>
           <th>开发工时（小时）</th>
           <th>单价：（90元/小时）</th>
           <th>费用（元）</th>
         </tr>
         <tr class="tongji">
           <td>应用逻辑</td>
           <td>{{logic_cycle_total[0].cycle}}</td>
           <td>{{dev_price.logic}}</td>
           <td>{{logic_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>功能开发</td>
           <td>{{gongnen_cycle_total[0].cycle}}</td>
           <td>{{dev_price.gongnen}}</td>
           <td>{{gongnen_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>页面设计</td>
           <td>{{sheji_cycle_total[0].cycle}}</td>
           <td>{{dev_price.sheji}}</td>
           <td>{{sheji_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>页面制作</td>
           <td>{{zhizuo_cycle_total[0].cycle}}</td>
           <td>{{dev_price.qianduan}}</td>
           <td>{{zhizuo_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>上线部署</td>
           <td>{{deploy_cycle[0].cycle}}</td>
           <td>{{dev_price.bushu}}</td>
           <td>{{deploy_cycle[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>总计</td>
           <td>{{cycle_total}}</td>
           <td>\</td>
           <td>{{total_price}}</td>
         </tr>
       </table>
      </div>

    </div>


    <div class="calculate">
      <button @click="clciFn">
        下一步
      </button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  export default{
    name:'step2list',
    created: function() {
        var hid=localStorage.getItem('hid');
        var type=JSON.parse(localStorage.getItem('checkedSysObj'));
        var obj={id:1,name:"后台"};
        type.push(obj);
        this.type=type;
        if(this.app_cate==0){
            this.app_cate=type[0].id;
        }
        this.getPinggu(hid,this.app_cate);
        this.sumCycle();
    },
    data() {
      return {
        app_cate:0,
        top: -2000,
        uiIsNeed: [],
        zhizuoIsNeed:[],
        type:[],
        logic:[],
        gongnen_index:[],
        qianduan_index:[],
        sheji_index:[],
        logic_index:0,
        laguage_version:[],
        language1:[],
        language2:[],
        language3:[],
        deploy:[],
        deploys:[],
        gongnen:[],
        pages_zhizuo:[],
        pages_sheji:[],
        logic_cycle:[],
        logic_cycle_total:[],
        gongnen_cycle:[],
        gongnen_cycle_total:[],
        sheji_cycle:[],
        sheji_cycle_total:[],
        zhizuo_cycle:[],
        zhizuo_cycle_total:[],
        deploy_cycle:[],
        dev_price:[],
        check_list:{},
        list:[],
        language1_check:[],
        language2_check:[],
        language3_check:[],
        total_price:0,
        cycle_total:0,
        version:[],
        laguage_terminal:[],
        check_verison_arr:[],
        gongnen_hover:{},
        check_gongnen_index:[],
        check_gongnen:[],
        isShow: {
          application: true,
          technology: true,
          functions: true,
          uis: true,
          frontEnd: true,
          online: true,
          summary: true,
          sum_cycle:false
        }
      }
    },
    methods: {
      clciFn(){
          var that=this;
          var list_arr=new Object();
          list_arr.gongnen_cycle_total=this.gongnen_cycle_total
          list_arr.sheji_cycle_total=this.sheji_cycle_total
          list_arr.zhizuo_cycle_total=this.zhizuo_cycle_total
          list_arr.deploy_cycle=this.deploy_cycle
          list_arr.logic_cycle_total=this.logic_cycle_total
          list_arr.language1_check=this.language1_check
          list_arr.language2_check=this.language2_check
          list_arr.language3_check=this.language3_check
          list_arr.gongnen_list=this.list;
          list_arr.check_verison_arr=this.check_verison_arr;

          var list=JSON.stringify(list_arr);
          localStorage.setItem('list',list);
          var type=localStorage.getItem('checkedSysObj')?JSON.parse(localStorage.getItem('checkedSysObj')):'';
          type.push({id:1,name:"后台"});
          localStorage.setItem('type',JSON.stringify(type));

          var project_id=localStorage.getItem('project_id')?localStorage.getItem('project_id'):0;
          var userinfo=localStorage.getItem('userinfo')?JSON.parse(localStorage.getItem('userinfo')):'';
          var uid=userinfo?userinfo.uid:0;
          if(uid){
              var develop_model=localStorage.getItem('develop_model');
              axios.post(this.HOST+'/api/Index/savePrice',{
                  info_str: list,
                  project_id:project_id,
                  uid:uid,
                  develop_model:develop_model
              }).then(function (response) {
                  that.$router.push({path:'/quote/step3type2'});
              }).catch(function (response) {
                  console.log(response);
              });
          }else{
              that.$router.push({path:'/quote/step3type2'});
          }
      },
      // tab切换
      tablabel(item){
        if(item == 'all'){
          for(let i in this.isShow){
              if(i!='sum_cycle'){
                  this.isShow[i] = true;
              }
          }
        }else {
          for(let i in this.isShow){
            this.isShow[i] = false;
            if(i == item){
              this.isShow[i] = true;
            }
          }
        }
      },
      getPinggu(hid,app_cate){
          var that=this;
          var select_type=localStorage.getItem('checkedSysObj');

          axios.post(this.HOST+'/api/Index/Pinggu', {
              hid: hid,
              app_cate:app_cate,
              select_type:select_type
             })
              .then(function (response) {
                  Vue.set(that.gongnen_cycle_total,that.app_cate,0);
                  Vue.set(that.sheji_cycle_total,that.app_cate,0);
                  Vue.set(that.zhizuo_cycle_total,that.app_cate,0);

                  var info=response.data.data.info;



                  that.version=info.version;
                  that.check_verison_arr[that.app_cate]=info.version;

                  for (var i in that.version) {
                      if(that.version[i]) {
                        that.uiIsNeed[that.version[i].id]=0;
                        that.zhizuoIsNeed[that.version[i].id]=1;
                      }
                  }


                  that.laguage_version=info.laguage_version;

                  that.logic_index=info.logic.logic_index;
                  delete info.logic.logic_index;
                  that.logic=info.logic;
                  that.logic_cycle_total[that.app_cate]=that.logic[that.logic_index].cycle;
                  that.logic_cycle[that.app_cate]=[];
                  that.logic_cycle[that.app_cate][that.logic_index]=that.logic[that.logic_index].cycle;

                  that.language1=info.language_1;
                  that.language2=info.language_2;
                  that.language3=info.language_3;

                  Vue.set(that.gongnen_index,that.app_cate,0);
                  var gongnen_index=that.gongnen_index[that.app_cate]?that.gongnen_index[that.app_cate]:0;
                  var language1_check=info.language_1[gongnen_index].id;
                  that.deploy=info.deploy[language1_check];
                  that.deploy_cycle[that.app_cate]=that.deploy.cycle;
                  that.deploys=info.deploy;
                  
                  that.gongnen=(info.language_1[0].gongnen==undefined)?[]:info.language_1[0].gongnen;
                  that.gongnen_hover=(info.language_1[0].gongnen==undefined)?[]:that.gongnen[0];
                  that.check_gongnen_index=info.check_gongnen_index;

                  that.check_gongnen=info.check_gongnen;

                  that.check_gongnen.forEach(function(value,index_c,array){
                      if(value) {
                          that.checkPingGu(value.index,value.hour);
                      }
                  });


                  //设置选中的功能语言
                  (that.language1_check[that.app_cate]==undefined)?that.language1_check[that.app_cate]={}:'';
                  that.language1_check[that.app_cate]={"name":that.language1[0].name,'des':that.language1[0].des};

                  that.laguage_terminal[that.app_cate]=[];

                  //设置对应版本下对应语言的前端制作
                  (that.qianduan_index[that.app_cate]==undefined)?that.qianduan_index[that.app_cate]=[]:"";
                  for(var i=0;i<that.laguage_version.length;i++){
                      var value=that.laguage_version[i];
                      that.pages_zhizuo[value]=[];

                      that.qianduan_index[that.app_cate][value]=0;
                      that.pages_zhizuo[value]=(info.language_2[0].qianduan!=undefined && info.language_2[0].qianduan[value]!=undefined)?info.language_2[0].qianduan[value]:[];

                      (that.laguage_terminal[that.app_cate][value]==undefined)?that.laguage_terminal[that.app_cate][value]=[]:"";
                      that.laguage_terminal[that.app_cate][value].push(2);
                  }

                  for (var i in that.version) {
                      if(that.version[i]) {
                          that.checkAllPingGuZhizuo(that.version[i].id,1);
                      }
                  }

               /*   info.check_page.forEach(function(page,index_p,array_p){
                      if(page) {
                          that.checkPingGuZhizuo(that.laguage_version[0],page.id,page.index,0,1);
                      }
                  });*/


                  //设置选中的前端语言
                  (that.language2_check[that.app_cate]==undefined)?that.language2_check[that.app_cate]={}:'';
                  that.language2_check[that.app_cate]={"name":that.language2[0].name,'des':that.language2[0].des};


                  //设置对应版本下对应语言的ui设计
                  (that.sheji_index[that.app_cate]==undefined)?that.sheji_index[that.app_cate]=[]:"";
                  for(var i=0;i<that.laguage_version.length;i++){
                      var value=that.laguage_version[i];
                      that.pages_sheji[value]=[];
                      that.sheji_index[that.app_cate][value]=0;
                      that.pages_sheji[value]=(info.language_3[0].sheji!=undefined && info.language_3[0].sheji[value] != undefined)?info.language_3[0].sheji[value]:[];

                      (that.laguage_terminal[that.app_cate][value]==undefined)?that.laguage_terminal[that.app_cate][value]=[]:"";
                      that.laguage_terminal[that.app_cate][value].push(3);
                  }


                  //设置选中的设计语言
                  (that.language3_check[that.app_cate]==undefined)?that.language3_check[that.app_cate]={}:'';
                  that.language3_check[that.app_cate]={"name":that.language3[0].name,'des':that.language3[0].des};

                  that.dev_price=info.dev_price;
                  localStorage.setItem('dev_price',JSON.stringify(info.dev_price));


              })
              .catch(function (response) {
                  console.log(response);
              });
      },
      goBack() {
        this.$router.go(-1);
      },
      showLeft(index,e){
        this.gongnen_hover=this.gongnen[index];
        this.top = e.offsetY + 24;
      },
      hiddenLeft(e){
        //console.log(1,e)
      },
      checkVersion(verison){
          var index =  this.laguage_version.indexOf(verison);
          var that=this;
          //取消
          if (index > -1) {
              this.laguage_version.splice(index, 1);
              this.laguage_terminal[this.app_cate][verison]=[];
              this.qianduan_index[this.app_cate][verison]=-1;
          }else{
              this.laguage_version.push(verison);
              this.laguage_terminal[this.app_cate][verison]=[2,3];
              this.qianduan_index[this.app_cate][verison]=0;
          }
          this.check_verison_arr[this.app_cate]=[];
          if(this.laguage_version!=undefined){
              this.laguage_version.forEach(function(value,index,array){
                  if(value) {
                      that.check_verison_arr[that.app_cate].push(that.version[value])
                  }
              });
          }
      },
      checkGonNeng(index){
          this.gongnen_index[this.app_cate]=index;
      
          this.gongnen=(this.language1[index].gongnen==undefined)?[]:this.language1[index].gongnen;
        
          //部署
          this.deploy=this.deploys[this.language1[index].id];
          this.deploy_cycle[this.app_cate]=this.deploy.cycle;
          (this.language1_check[this.app_cate]==undefined)?this.language1_check[this.app_cate]={}:'';
          this.language1_check[this.app_cate]={"name":this.language1[index].name,'des':this.language1[index].des};

      },
      checkQianDuan(index,version){
          this.qianduan_index[this.app_cate][version]=index;
          var arr=this.language2[index].qianduan;

          if(arr!=undefined && arr[version]!=undefined){
              //this.pages_zhizuo[version]=arr[version];
              Vue.set(this.pages_zhizuo,version,arr[version]);
          }else{
              //this.pages_zhizuo[version]=[];
              Vue.set(this.pages_zhizuo,version,[]);
          }

          (this.language2_check[this.app_cate]==undefined)?this.language2_check[this.app_cate]={}:'';
           this.language2_check[this.app_cate]={"name":this.language2[index].name,'des':this.language2[index].des};

      },
      checkSheji(index,version){
            this.sheji_index[this.app_cate][version]=index;

            var arr=this.language3[index].sheji;
            if(arr!=undefined && arr[version]!=undefined){
                //this.pages_sheji[version]=arr[version];
                Vue.set(this.pages_sheji,version,arr[version]);
            }else{
              //this.pages_sheji[version]=[];
              Vue.set(this.pages_sheji,version,[]);
            }

            console.log(version);
            console.log(this.pages_sheji[version]);


          (this.language3_check[this.app_cate]==undefined)?this.language3_check[this.app_cate]={}:'';
          this.language3_check[this.app_cate]={"name":this.language3[index].name,'des':this.language3[index].des};
            
      },
      checkLogic(index,hour){
           this.logic_cycle[this.app_cate]=[];
           this.logic_cycle[this.app_cate][index]=hour;
          Vue.set(this.logic_cycle_total,this.app_cate,hour);
      },
      checkPingGu(index,hour,e=''){
          var that=this;
          var checked=true;
          var flag=true;
          if(e){
              checked=e.target.checked;
          }
          var g_obj=this.gongnen[index];
           
         (this.list[this.app_cate]==undefined)?this.list[this.app_cate]=[]:'';
         (this.list[this.app_cate][g_obj.page_id]==undefined)?this.list[this.app_cate][g_obj.page_id]={}:'';
         (this.list[this.app_cate][g_obj.page_id].list==undefined)?this.list[this.app_cate][g_obj.page_id].list=[]:'';

         (this.gongnen_cycle[this.app_cate]==undefined)?this.gongnen_cycle[this.app_cate]=[]:'';
 
          if(checked){


             this.gongnen[index].check_hour=this.gongnen[index].hour;
              var gongnen_arr=this.list[this.app_cate][g_obj.page_id].list;
              for (var i in gongnen_arr) {
                  if(gongnen_arr[i].id==g_obj.id) {
                      flag=false;
                  }
              }
              if(flag){
                  this.list[this.app_cate][g_obj.page_id].list.push(g_obj);
              }

             /*if(this.list[this.app_cate][g_obj.page_id].sheji==undefined){
                 this.list[this.app_cate][g_obj.page_id].sheji='不需要';
             }
             if(this.list[this.app_cate][g_obj.page_id].zhizuo==undefined){
                  this.list[this.app_cate][g_obj.page_id].zhizuo='仿制';
             }*/
             if(this.list[this.app_cate][g_obj.page_id].page_name==undefined){
                  this.list[this.app_cate][g_obj.page_id].page_name=g_obj.page_name;
             }
             if(this.list[this.app_cate][g_obj.page_id].child_name==undefined){
                  this.list[this.app_cate][g_obj.page_id].child_name=g_obj.child_name;
             }
             if(this.list[this.app_cate][g_obj.page_id].plate_name==undefined){
                  this.list[this.app_cate][g_obj.page_id].plate_name=g_obj.plate_name;
             }

             if(this.list[this.app_cate][g_obj.page_id].plate_id==undefined){
                  this.list[this.app_cate][g_obj.page_id].plate_id=g_obj.plate_id;
              }
            /*  if(this.list[this.app_cate][g_obj.page_id].app_version==undefined){
                  this.list[this.app_cate][g_obj.page_id].app_version="无";
              }*/

             this.gongnen_cycle[this.app_cate][index]=hour;
             this.check_gongnen_index.push(index);
          }else{
            
             this.gongnen[index].check_hour=0;
             this.list[this.app_cate][g_obj.page_id].list.forEach(function(value,index_c,array){
                 if(value && value.id == g_obj.id) {
                   that.list[that.app_cate][g_obj.page_id].list.splice(index_c, 1);
                 }
              });

              this.check_gongnen_index.forEach(function(value,index_c,array){
                  if(value && value==index) {
                      that.check_gongnen_index.splice(index_c, 1);
                  }
              });
             
            this.gongnen_cycle[this.app_cate].splice(index, 1);
          } 

          
         var cycle=0
         this.gongnen_cycle[this.app_cate].forEach(function(value,index_c,array){
              if(value) {
                  cycle+=parseInt(value);
              }
          });
          Vue.set(that.gongnen_cycle_total,that.app_cate,0);
          Vue.set(that.gongnen_cycle_total,that.app_cate,cycle);
     },
      //ui设计选中方法
      checkPingGuSheji(version,index,hour){
           var p_obj=this.pages_sheji[version][index];
           this.pages_sheji[version][index].need=1;
           this.pages_sheji[version][index].check_hour= this.pages_sheji[version][index].hour;
          (this.list[this.app_cate][p_obj.page_id].sheji==undefined)?this.list[this.app_cate][p_obj.page_id].sheji=[]:'';


          (this.list[this.app_cate]==undefined)?this.list[this.app_cate]=[]:'';
          (this.list[this.app_cate][p_obj.page_id]==undefined)?this.list[this.app_cate][p_obj.page_id]={}:'';


           this.list[this.app_cate][p_obj.page_id].sheji[version]='需要';

          (this.sheji_cycle[this.app_cate]==undefined)?this.sheji_cycle[this.app_cate]=[]:'';
          (this.sheji_cycle[this.app_cate][version]==undefined)?this.sheji_cycle[this.app_cate][version]=[]:'';
          this.sheji_cycle[this.app_cate][version][index]=hour;
          var cycle=0
          if(this.sheji_cycle!=undefined){
              this.sheji_cycle[this.app_cate].forEach(function(value,index,array){
                 if(value) {
                     value.forEach(function (value_child, index_child, array_child) {
                         cycle+=parseInt(value_child);
                     });
                 }
              });
          }

          Vue.set(this.sheji_cycle_total,this.app_cate,cycle);

      },
      //ui设计全部选择方法
      checkAllPingGuSheji(version){
         var that=this;
         Vue.set(that.uiIsNeed,version,1);
         if(this.pages_sheji[version]!=undefined) {
            this.pages_sheji[version].forEach(function (value, index, array) {
                if (value) {
                    that.pages_sheji[version][index].need=1;
                    that.checkPingGuSheji(version,index,value.hour)
                }
            });
        }
      },
      //页面制作选中方法
      checkPingGuZhizuo(version,id,index,hour_index,need){
            var p_obj=this.pages_zhizuo[version][index];
            this.pages_zhizuo[version][index].need=need;
           (this.list[this.app_cate]==undefined)?this.list[this.app_cate]=[]:'';
           (this.list[this.app_cate][p_obj.page_id]==undefined)?this.list[this.app_cate][p_obj.page_id]={}:'';
           (this.list[this.app_cate][p_obj.page_id].zhizuo==undefined)?this.list[this.app_cate][p_obj.page_id].zhizuo=[]:'';
           (this.list[this.app_cate][p_obj.page_id].app_version==undefined)?this.list[this.app_cate][p_obj.page_id].app_version=[]:'';

           if(hour_index==0){
               this.list[this.app_cate][p_obj.page_id].zhizuo[version]='仿制';
           }else{
               this.list[this.app_cate][p_obj.page_id].zhizuo[version]='开发';
           }
           this.list[this.app_cate][p_obj.page_id].page_name=p_obj.page_name;
           this.list[this.app_cate][p_obj.page_id].plate_name=p_obj.plate_name;
           this.list[this.app_cate][p_obj.page_id].plate_id=p_obj.plate_id;

            this.list[this.app_cate][p_obj.page_id].app_version[version]=this.version[version].name;


            var hour_arr=p_obj.hour_arr;
            var hour=hour_arr[hour_index]?hour_arr[hour_index]:0;

           (this.zhizuo_cycle[this.app_cate]==undefined)?this.zhizuo_cycle[this.app_cate]=[]:'';
           (this.zhizuo_cycle[this.app_cate][version]==undefined)?this.zhizuo_cycle[this.app_cate][version]=[]:'';
            this.zhizuo_cycle[this.app_cate][version][index]=hour;

           var cycle=0
          if(this.zhizuo_cycle[this.app_cate]!=undefined){
              this.zhizuo_cycle[this.app_cate].forEach(function(value,index,array){
                  if(value) {
                      value.forEach(function (value_child, index_child, array_child) {
                          cycle+=parseInt(value_child);
                      });
                  }
              });
          }
           Vue.set(this.zhizuo_cycle_total,this.app_cate,cycle);
           this.pages_zhizuo[version][index].hour=hour;
           this.pages_zhizuo[version][index].check_hour= hour;
           //console.log(this.list[this.app_cate]);
     },
     //页面制作全选
      checkAllPingGuZhizuo (version,need){
         var that=this;
          Vue.set(that.zhizuoIsNeed,version,need);
         if(this.pages_zhizuo[version]!=undefined) {
             this.pages_zhizuo[version].forEach(function (value, index, array) {
                 if (value) {
                     if(need==1){
                         that.checkPingGuZhizuo(version,value.id,index,0,need)
                     }
                     if(need==2){
                         that.checkPingGuZhizuo(version,value.id,index,1,need)
                     }
                 }
             });
         }
     },

      //取消ui设计
      cancelPingGuSheji(version,index){
          var p_obj=this.pages_sheji[version][index];
          this.pages_sheji[version][index].need=0;
          this.pages_sheji[version][index].check_hour= 0;
          (this.list[this.app_cate]==undefined)?this.list[this.app_cate]=[]:'';
          (this.list[this.app_cate][p_obj.page_id]==undefined)?this.list[this.app_cate][p_obj.page_id]={}:'';
          (this.list[this.app_cate][p_obj.page_id].sheji==undefined)?this.list[this.app_cate][p_obj.page_id].sheji=[]:'';

          this.list[this.app_cate][p_obj.page_id].sheji[version]='不需要';

          (this.sheji_cycle[this.app_cate]==undefined)?this.sheji_cycle[this.app_cate]=[]:'';
          (this.sheji_cycle[this.app_cate][version]==undefined)?this.sheji_cycle[this.app_cate][version]=[]:'';

          this.sheji_cycle[this.app_cate][version].splice(index, 1);

          var cycle=0
          if(this.sheji_cycle!=undefined){
              this.sheji_cycle[this.app_cate].forEach(function(value,index,array){
                  if(value) {
                      value.forEach(function (value_child, index_child, array_child) {
                          cycle+=parseInt(value_child);
                      });
                  }
              });
          }

          Vue.set(this.sheji_cycle_total,this.app_cate,cycle);

      },
      //取消全部ui设计
      cancelAllPingGuSheji(version) {
          var that=this;
          Vue.set(that.uiIsNeed,version,0);
          if(this.pages_sheji[version]!=undefined) {
              this.pages_sheji[version].forEach(function (value, index, array) {
                  if (value) {
                      that.pages_sheji[version][index].need=0;
                      that.cancelPingGuSheji(version,index)
                  }
              });
          }
          Vue.set(this.sheji_cycle_total,this.app_cate,0);
       },
      //取消页面制作
      cancelPingGuZhizuo(version,id,index,need){
            var p_obj=this.pages_zhizuo[version][index];
            this.pages_zhizuo[version][index].need=need;
            this.pages_zhizuo[version][index].check_hour=0;

            (this.list[this.app_cate]==undefined)?this.list[this.app_cate]=[]:'';
            (this.list[this.app_cate][p_obj.page_id]==undefined)?this.list[this.app_cate][p_obj.page_id]={}:'';
            (this.list[this.app_cate][p_obj.page_id].zhizuo==undefined)?this.list[this.app_cate][p_obj.page_id].zhizuo=[]:'';
            (this.list[this.app_cate][p_obj.page_id].app_version==undefined)?this.list[this.app_cate][p_obj.page_id].app_version=[]:'';

            this.list[this.app_cate][p_obj.page_id].zhizuo[version]='不需要';

            this.list[this.app_cate][p_obj.page_id].page_name=p_obj.page_name;
            this.list[this.app_cate][p_obj.page_id].plate_name=p_obj.plate_name;
            this.list[this.app_cate][p_obj.page_id].plate_id=p_obj.plate_id;

            this.list[this.app_cate][p_obj.page_id].app_version[version]=this.version[version].name;


            (this.zhizuo_cycle[this.app_cate]==undefined)?this.zhizuo_cycle[this.app_cate]=[]:'';
            (this.zhizuo_cycle[this.app_cate][version]==undefined)?this.zhizuo_cycle[this.app_cate][version]=[]:'';

            this.zhizuo_cycle[this.app_cate][version].splice(index, 1);

            var cycle=0
            if(this.zhizuo_cycle[this.app_cate]!=undefined){
                this.zhizuo_cycle[this.app_cate].forEach(function(value,index,array){
                    if(value) {
                        value.forEach(function (value_child, index_child, array_child) {
                            cycle+=parseInt(value_child);
                        });
                    }
                });
            }
            Vue.set(this.zhizuo_cycle_total,this.app_cate,cycle);
            this.pages_zhizuo[version][index].hour=0;
            //console.log(this.list[this.app_cate]);
        },
      //取消全部页面制作
      cancelAllPingGuZhizuo(version,need){
         var that=this;
          Vue.set(that.zhizuoIsNeed,version,need);
          if(this.pages_zhizuo[version]!=undefined) {
              this.pages_zhizuo[version].forEach(function (value, index, array) {
                  if (value) {
                      that.cancelPingGuZhizuo(version,value.id,index,need)
                  }
              });
          }
          Vue.set(this.zhizuo_cycle_total,this.app_cate,0);
     },

      checkAppCategory(id){
         var hid=localStorage.getItem('hid');
         this.app_cate=id;
         this.getPinggu(hid,id);
          this.isShow.sum_cycle=false;
     },
      checkSumCycle(){
          this.app_cate=0;
          this.isShow.sum_cycle=!this.isShow.sum_cycle;
          this.sumCycle();
     },
      sumCycle(){
         var that=this;
         var total_price=0;
         var cycle_total=0;
         that.logic_cycle_total[0]={price:0,cycle:0},
         that.gongnen_cycle_total[0]={price:0,cycle:0},
         that.sheji_cycle_total[0]={price:0,cycle:0},
         that.zhizuo_cycle_total[0]={price:0,cycle:0},
         that.deploy_cycle[0]={price:0,cycle:0},

         that.type.forEach(function(value,index,array){
             var sum=0;
             var cycle=0
             if(that.logic_cycle_total[value.id]!=undefined){

                 that.logic_cycle_total[0].price+=that.dev_price.logic*parseInt(that.logic_cycle_total[value.id]);
                 that.logic_cycle_total[0].cycle+=parseInt(that.logic_cycle_total[value.id]);

                 sum+=that.dev_price.logic*parseInt(that.logic_cycle_total[value.id]);
                 cycle+=parseInt(that.logic_cycle_total[value.id]);
             }

             if(that.gongnen_cycle_total[value.id]!=undefined){

                 that.gongnen_cycle_total[0].price+=that.dev_price.gongnen*parseInt(that.gongnen_cycle_total[value.id]);
                 that.gongnen_cycle_total[0].cycle+=parseInt(that.gongnen_cycle_total[value.id]);

                 sum+=that.dev_price.gongnen*parseInt(that.gongnen_cycle_total[value.id]);
                 cycle+=parseInt(that.gongnen_cycle_total[value.id]);
             }

             if(that.sheji_cycle_total[value.id]!=undefined){

                 that.sheji_cycle_total[0].price+=that.dev_price.sheji*parseInt(that.sheji_cycle_total[value.id]);
                 that.sheji_cycle_total[0].cycle+=parseInt(that.sheji_cycle_total[value.id]);

                 sum+=that.dev_price.sheji*parseInt(that.sheji_cycle_total[value.id]);
                 cycle+=parseInt(that.sheji_cycle_total[value.id]);
             }

             if(that.zhizuo_cycle_total[value.id]!=undefined){

                 that.zhizuo_cycle_total[0].price+=that.dev_price.qianduan*parseInt(that.zhizuo_cycle_total[value.id]);
                 that.zhizuo_cycle_total[0].cycle+=parseInt(that.zhizuo_cycle_total[value.id]);

                 sum+=that.dev_price.qianduan*parseInt(that.zhizuo_cycle_total[value.id]);
                 cycle+=parseInt(that.zhizuo_cycle_total[value.id]);
             }

             if(that.deploy_cycle[value.id]!=undefined){
                 that.deploy_cycle[0].price+=that.dev_price.bushu*parseInt(that.deploy_cycle[value.id]);
                 that.deploy_cycle[0].cycle+=parseInt(that.deploy_cycle[value.id]);

                 sum+=that.dev_price.bushu*parseInt(that.deploy_cycle[value.id]);
                 cycle+=parseInt(that.deploy_cycle[value.id]);
             }


             total_price+=sum;
             cycle_total+=cycle;

         });

         that.total_price=total_price;
         that.cycle_total=cycle_total;

     }
    },
    watch: {

    },
    computed:{
        qianduan_total: function(){
            return function(version) {
                var sum = 0;
                if(this.pages_zhizuo[version].length>0) {
                    for (var i = 0; i < this.pages_zhizuo[version].length; i++) {
                        if(this.pages_zhizuo[version][i].check_hour!=undefined){
                            sum += parseInt(this.pages_zhizuo[version][i].check_hour);
                        }
                    }
                }
               
                return sum;
            }
          },
        sheji_total: function(){
            return function(version) {
                var sum = 0;
                if(this.pages_sheji[version].length>0){
                       for(var i= 0 ;i< this.pages_sheji[version].length; i++) {
                           if(this.pages_sheji[version][i].check_hour!=undefined) {
                               sum += parseInt(this.pages_sheji[version][i].check_hour);
                           }
                       }
                }
               
                return sum;
            }
        },
        gongnen_total:function(){
             return function() {
                var sum = 0;
                if(this.gongnen.length>0){
                       for(var i= 0 ;i< this.gongnen.length; i++) {
                           if(this.gongnen[i].check_hour!=undefined) {
                               sum += parseInt(this.gongnen[i].check_hour);
                           }
                       }
                }
               
                return sum;
             }
        }

   }

  }
</script>
<style>
</style>
<style scoped>
  .ui label{
    position: relative;
  }
  .ui label input{
    opacity: 0;
  }
  .ui label>img{
    position: absolute;
    top: 0;
    left: -2px;
    z-index: 10;
  }

  .leftModel .san:before{
    content: '';
    border: 15px solid transparent;
    border-right-color: white;
    position: absolute;
    left: -37px;
    top: 30px;
    margin-top: -20px;
  }
  .leftModel{
    position: absolute;
    z-index: 100;
    right: -228px;
    width: 228px;
    background-color: white;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px 7px;
  }
  .leftModel h2{
    color: #01c1dd;
    font-size: 14px;
    padding: 10px 0;
  }
  .leftModel .thumb{
    width: 100%;
    height: 100%;
  }
  .quote-board {
    margin: 2rem auto 0;
    max-width: 980px;
    padding: 3rem 3rem 4rem;
    border-radius: .4rem;
    background-color: #fff;
    width: 100%;
  }
  .price-list h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .price-list .line {
    padding-top: 1.2rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .price-list .line button {
    width: 7rem;
    height: 2.4rem;
    font-size: 1rem;
    color: #fff;
    background: #4289db;
    border-radius: 0.4rem;
    cursor: pointer;
  }
  .price-list .line ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li {
    position: relative;
    width: 7rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #979fa8;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    border-left: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .price-list .line ul li:first-child {
    border-left: none;
  }
  .price-list .line ul li input[type="radio"] {
    position: absolute;
    top: 0;
    visibility: hidden;
  }
  .price-list .line ul li input[type="radio"]:checked + label {
    background: #4289db;
    color: #fff;
  }
  .price-list .date-time {
    width: 100%;
    margin: 40px auto 0;
    background: #f3f5f7;
    padding-bottom: 1.2rem;
  }
  .price-list .date-time h4 {
    font-size: 1.2rem;
    padding: 0.7rem;
    text-align: center;
    color: #fff;
    background: #c9ccd2;
  }
  .price-list .date-time table {
    width: 94%;
    padding: 0 1rem;
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
    margin: 1rem auto;
  }
  .price-list .date-time table:first-child {
    margin-top: 0;
  }
  .price-list .date-time table td, .price-list .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .price-list .date-time table th {
    /*background: #dfe3e6;*/
  }
  .price-list .date-time table label {
    margin-left: 1rem;
  }
  .calculate {
    margin: 2.5rem auto;
    text-align: center;
  }
  .calculate button {
    width: 33%;
    height: 4.1rem;
    line-height: 2.1rem;
    font-size: 1.5rem;
    min-width: 17rem;
    color: #fff;
    float: none;
    cursor: pointer;
    border-radius: .4rem;
    border: 0;
    box-shadow: 0 3px 3px rgba(45,51,56,.2);
    outline: none;
    -webkit-appearance: button;
    background-color: #4289db;
  }
  .calculate button .link {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 4.1rem;
  }
</style>
